<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <form id="app">
    <div>
      <label>ID：</label>
      <input type="text" v-model="book.id" id="id" readonly>
    </div>
    <div>
      <label>书名：</label>
      <input type="text" v-model="book.name">
    </div>
    <div>
      <label>作者：</label>
      <input type="text" v-model="book.author">
    </div>
    <div>
      <label>出版日期：</label>
      <input type="date" v-model="book.date">
    </div>
    <div>
      <label>出版社：</label>
      <input type="text" v-model="book.press">
    </div>
    <div>
      <label>价格：</label>
      <input type="text" v-model="book.price">
    </div>
    <div>
      <label>状态：</label>
      <select v-model="book.state">
        <option value="1">在馆</option>
        <option value="0">已借出</option>
      </select>
    </div>
    </div>
    <div>
      <input type="button" value="更新" id="updateBtn" @click="doUpdate">
      <input type="reset" value="重置">
    </div>
  </form>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  Vue.createApp({
    data() {
      return {
        book: {
          id: "",
          name: "",
          author: "",
          date: "",
          press: "",
          price: "",
          state: ""
        }
      }
    },
    methods: {
      async doUpdate() {
        const {data} = await axios.put('/bms/book',this.book);
        if(data > 0){
            window.location.href = "/bms/page_book/bookIndex.html";
        }else{
            alert("修改失败");
        }
      }
    },
    mounted() {
      // 获取 url ? 后面的参数
      this.book.id = location.href.substring(location.href.lastIndexOf("?") + 1);
    }
  }).mount('#app');
</script>
</html>
